<template>
  <!--希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部-->
  <div id="app">
    <h3>您的钱还剩下:{{ money }}元</h3>
    <button @click="money3">点击充一百块</button>
    <!-- 在绑定事件处理函数的时候，可以使用 () 传递参数 -->
    <button @click="money2(2)">点击购买一串烤面筋</button>
    <h3>烤面筋库存：{{ num }}串</h3>
    <h3>您身上目前有{{ sum }}串烤面筋</h3>
    <!-- v-on: 指令可以被简写为 @ -->
    <button @click="weight1">点击吃一串烤面筋</button>
    <h3>您的体重是：{{ weight }}斤</h3>
    <button @click="weight2">点击跑步45分钟</button>
  </div>
</template>

<script>
export default {
  name: "App",
  // 插值表达式使用的变量放在data函数的返回对象里
  // data 对象就是要渲染到页面上的数据
  data() {
    return {
      money: 10,
      num: 100,
      weight: 80,
      sum: 0,
    };
  },
  // methods 的作用，就是定义事件的处理函数
  methods: {
    money2(e) {
      if (this.money == 0) {
        alert("你身上没有钱了！");
        return;
      } else if (this.num == 0) {
        alert("烤面筋卖完了，明天再来吧。");
      }
      this.money -= e;
      this.num -= 1;
      this.sum += 1;
      // sum == 0 ? alert("你身上没有烤面筋！") : "";
    },
    weight1() {
      if (this.sum == 0) {
        alert("你身上没有烤面筋！");
        return;
      }
      this.sum -= 1;
      this.weight += 0.1;
    },
    weight2() {
      if (this.weight < 77) {
        alert("太瘦了，不能再跑了");
        return;
      }
      this.weight -= 0.3;
    },
    money3() {
      this.money += 100;
    },
  },
};
</script>

<style>
div {
  color: purple;
  text-align: center;
}
</style>
